<template>
  <view class="container" style="background: #FFF;min-height: 100%;">
    <!-- 搜索框 -->
    <uni-search-bar
      placeholder="请输入车牌号"
      @confirm="getDepositRecordsList"
      @cancel="cancel"
      cancel-text="取消"
      v-model="searchValue">
      <uni-icons slot="searchIcon" color="#999999" size="18" type="home"/>
    </uni-search-bar>

    <view v-if="depositRecordsList.length === 0" style="border-top: 1px solid #dcdcdc">
      <image src="/static/nodata.png" style="width: 100%"></image>
    </view>

    <!-- 渲染存储记录 -->
    <view style="border-top: 1px solid #dcdcdc">
      <uni-card  v-for="(item, index) in depositRecordsList" :title="findById(item.storeId,selectData.storeList)?.storeName" :extra="formatDate(item.createTime)+' 创建'">
        <uni-row>
          <uni-col :span="12" style="text-align: left;">存储车牌：{{ item.licensePlate }}</uni-col>
          <uni-col :span="12" style="text-align: left;">存放日期：{{ item.storageDays }}月</uni-col>
        </uni-row>
        <uni-row>
          <uni-col :span="12" style="text-align: left;">存储类型：{{ getCodeText(item.storageType,selectData.storageTypeList) }}</uni-col>
          <uni-col :span="12" style="text-align: left;">
            存储状态：
            <uni-tag :text="getCodeText(item.status,selectData.statusList)" :type="getTagType(item.status)" size="mini"/>
          </uni-col>
        </uni-row>
        <uni-row>
          <uni-col :span="24" style="text-align: left;">存胎时间：{{ formatDate(item.startDate) }}</uni-col>
        </uni-row>
        <uni-row>
          <uni-col :span="24" style="text-align: left;">到期时间：{{ formatDate(item.expirationDate) }}</uni-col>
        </uni-row>
        <uni-row>
          <uni-col :span="24" style="text-align: left;">
            <button class="mini-btn" type="primary" size="mini" @click="selectRowData(item)" style="width: 100%;margin-top: 10px">选择导入</button>
          </uni-col>
        </uni-row>
      </uni-card>
    </view>
  </view>
</template>

<script lang="ts">
  import { DepositRecordsApi, DepositRecordsVO } from '@/sheep/api/depositrecords';
  import { ReleaseRecordsApi, ReleaseRecordsVO } from '@/sheep/api/releaserecords';
  import { DictUtils } from '@/sheep/store/DictUtils';
  import { StoreApi } from '@/sheep/api/store';

  export default {
    components: {},
    data() {
      return {
        selectData:{
          statusList:[],
          storageTypeList:[],
          storeList:[]
        },
        searchValue: "",
        depositRecordsList: [] as DepositRecordsVO[]
      };
    },
    mounted() {
      this.initSelectData();
      this.getDepositRecordsList();
    },
    methods: {
      // 获取存储记录列表
      async getDepositRecordsList() {
        try {
          const {data} = await DepositRecordsApi.getDepositRecordsPage({ status:'4',licensePlate: this.searchValue, storeId:uni.getStorageSync('storeId') });
          this.depositRecordsList = data.list;
        } catch (error) {
          console.error('Failed to fetch deposit records:', error);
        }
      },
      // 清空搜索值并重新加载记录
      cancel() {
        this.searchValue = "";
        this.getDepositRecordsList();
      },
      // 格式化时间
      formatDate(date: string) {
        const d = new Date(date);
        const pad = (num: number) => String(num).padStart(2, "0");

        return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`;
      },
      getCodeText(status: string,codeList:[]) {
        const item = codeList.find(item=>item.value==status);
        return item?.label || '未知';
      },
      getTagType(status: number){
        switch (status) {
          case 1:return "primary";
          case 2:return "success";
          case 3:return "warning";
          case 4:return "error";
          default:return "";
        }
      },
      findById(id: string,list:[]):any {
        const item = list.find(item=>item.id==id);
        return item;
      },
      async initSelectData() {
        this.selectData.statusList = DictUtils.getDictData('tire_deposit_records_status');
        this.selectData.storageTypeList = DictUtils.getDictData('tire_storage_type');

        const storeResult = await StoreApi.getStorePage({});
        this.selectData.storeList = storeResult?.data?.list || [];
      },
      async selectRowData(depositRecords:DepositRecordsVO){
        const depositRecordsId = depositRecords.id;
        const params = {depositRecordsId,status:'0'} as ReleaseRecordsVO;
        const {code,data,msg} = await ReleaseRecordsApi.createWithdrawalFromDeposit(params);
        if(code == "0"){
          uni.showToast({
            title: "导入新增成功",
            icon: 'none',
          });
          uni.navigateBack();
        }else{
          uni.showToast({
            title: msg,
            icon: 'none',
          });
        }
      }
    }
  };
</script>

<style lang="scss">
  /* 这里可以添加一些样式 */
</style>
